<!doctype html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Language" content="en" />
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Slider Test Page</title>
        <script src="../../../jquery-1.2.6.js" type="text/javascript" charset="utf-8"></script>
        <link rel="stylesheet" href="../../../themes/default/ui.all.css" type="text/css" charset="utf-8" />
        <script src="../../../ui/ui.core.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../ui/ui.slider.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../ui/effects.core.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../ui/effects.blind.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../ui/effects.bounce.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../ui/effects.clip.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../ui/effects.drop.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../ui/effects.explode.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../ui/effects.fold.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../ui/effects.highlight.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../ui/effects.pulsate.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../ui/effects.scale.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../ui/effects.shake.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../ui/effects.slide.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../ui/effects.transfer.js" type="text/javascript" charset="utf-8"></script>

        <style type="text/css" media="all">
            #wrap {
                width: 900px;
                margin: 0 auto;
            }
            #col-1 {
                width: 220px;
                border: 1px solid #ccc;
                padding: 20px;
                float: left;
            }
            #col-2 {
                width: 500px;
                float: left;
            }
            #col-2 div {
                width: 100px;
                height: 100px;
                background: #ccc;
                border: 1px solid #000;
                margin: 20px;
                float: left;
                text-align: center;
                font-size: 150%;
            }
            .label-1 { position: absolute; left: 0; top: -1.1em; }
            .label-2 { position: absolute; right: 0; top: -1.1em; }
        </style>
    </head>
    <body>
        <div id="wrap">
            <h1>Slider Interface Example</h1>
            <div id="col-1">
                <div id="slider1" class="ui-slider-2">
                    <div class="ui-slider-handle"></div>
                    <div class="ui-slider-handle"></div>
                    <span class="label-1">0</span>
                    <span class="label-2">100</span>
                </div>
                <br />
                <select id="effects">
                    <option>fade</option>
                    <option>drop</option>
                    <option>fold</option>
                    <option>highlight</option>
                    <option>explode</option>
                    <option>slide</option>
                    <option>clip</option>
                    <option>shake</option>
                    <option>scale</option>
                    <option>pulsate</option>
                    <option>bounce</option>
                </select>
            </div>

            <div id="col-2">
                <div>0</div>
                <div>10</div>
                <div>20</div>
                <div>30</div>
                <div>40</div>
                <div>50</div>
                <div>60</div>
                <div>70</div>
                <div>80</div>
                <div>90</div>
                <div>100</div>
            </div>
        </div>
        <script type="text/javascript">
            $(function() {
                $('#slider1').slider({
                    stepping: 10,
                    min: 0,
                    max: 100,
                    range: true,
                    change: function(event, ui) {
                        var minValue = $('#slider1').slider('value', 0);
                        var maxValue = $('#slider1').slider('value', 1);
                        $('#col-2 div').each(function() {
                            var value = parseInt($(this).html(), 10);
                            if (value < minValue || value > maxValue) {
                                var effect = $('#effects').val();
                                switch (effect) {
                                    case 'fade' :
                                        $(this).fadeOut();
                                        break;
                                    case 'drop' :
                                        $(this).hide('drop', {direction: 'down'});
                                        break;
                                    default :
                                        $(this).hide(effect);
                                }
                            } else
                                $(this).fadeIn();
                        });
                    },
                    handles: [
                        {start: 0, min: 0, max: 100},
                        {start: 100, min: 0, max: 100}
                    ]
                });
            });
        </script>
    </body>
</html>
